// 定义两个初始变量设置画布的宽高
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;//圆球的半径
var MARGIN_TOP = 60;//数字距离画布的上边距；
var MARGIN_LEFT = 30;//第一个数字距离画布的左边距；
const endTime = new Date(2018,2,20,18,20,15); //定义一个倒计时截止时间
var curShowTimeSeconds = 0;
var balls = []//设置一个数组存放小球;
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]
//定义一个数字存放不同颜色
window.onload = function () {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
     canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;
    curShowTimeSeconds = getCurrentShowTimeSeconds();
    // render (context);//定义函数绘制画布
    setInterval(
        function () {
            render( context );
            update();
        }
        ,
        50
    )
}
function getCurrentShowTimeSeconds() {
    var curTime = new Date();
     var ret = endTime.getTime() - curTime.getTime();
     ret = Math.round(ret / 1000);
     return ret >= 0 ? ret : 0;//判断最终结果是否大于0，如果小于0则设置ret等于0；
}
function  update( ) {
    var nextShowTimeSeconds = getCurrentShowTimeSeconds();
    var nextHours = parseInt(nextShowTimeSeconds / 3600);
    var nextminutes = parseInt(nextShowTimeSeconds - nextHours * 3600) / 60;
    var nextseconds = nextShowTimeSeconds % 60;

    var curHours = parseInt(curShowTimeSeconds / 3600);
    var curminutes = parseInt(curShowTimeSeconds - curHours * 3600) / 60;
    var curseconds = curShowTimeSeconds % 60;
    if (nextseconds != curseconds) {
        if (parseInt(curHours / 10) != parseInt(nextHours / 10)) {
          addBalls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(curHours / 10));
        }
        if (parseInt(curHours % 10) != parseInt(nextHours % 10)) {
          addBalls(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(curHours % 10));
        }
        if (parseInt(curminutes / 10) != parseInt(nextminutes / 10)) {
          addBalls(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(curminutes / 10));
        }
        if (parseInt(curminutes % 10) != parseInt(nextminutes % 10)) {
          addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(curminutes % 10));
        }
        if (parseInt(curseconds / 10) != parseInt(nextseconds / 10)) {
          addBalls(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(curseconds / 10));
        }
        if (parseInt(curseconds % 10) != parseInt(nextseconds % 10)) {
          addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(curseconds % 10));
        }
        
      curShowTimeSeconds = nextShowTimeSeconds;
    }
     updateBalls();
    
}
function updateBalls() {
    for(var i = 0; i < balls.length; i++) {
        balls[i].x += balls[i].vx;
        balls[i].y += balls[i].vy;
        balls[i].vy += balls[i].g;

        if( balls[i].y >= WINDOW_HEIGHT-RADIUS) {
            balls[i].y = WINDOW_HEIGHT-RADIUS;
            balls[i].vy = -balls[i].vy*0.75;
        }
    }
}
function addBalls(x,y, num) {//在x,y的位置对数字num点阵化的位置加上一个彩色小球
    for(var i = 0; i < digit[num].length; i++) {
        for(var j = 0; j < digit[num][i].length; j++ ) {
            if(digit[num][i][j] == 1) {
              var aBall = { 
                  x: x + j * 2*(RADIUS + 1) + (RADIUS + 1), 
                  y: y + i * 2*(RADIUS + 1) + (RADIUS + 1),
                  g: 1.5 + Math.random(),//用随机数生成小球的加速度
                  vx: Math.pow(-1, Math.ceil(Math.random()*1000) ) * 4,//小球在x轴方向的速度，取-4或者4
                  vy: -5,//小球在y轴方向的速度
                  color: colors[ Math.floor(Math.random()*colors.length)]
                };
                balls.push(aBall);
            }
        }
    }
    
}
function render(cxt) {
    cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);//对一个矩形空间内的图像进行一次刷新操作

     var hours = parseInt(curShowTimeSeconds / 3600);
     var minutes = parseInt(curShowTimeSeconds - hours * 3600) / 60;
     var seconds = curShowTimeSeconds % 60;
    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt);
    renderDigit(MARGIN_LEFT + 15*(RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt);
    renderDigit(MARGIN_LEFT + 30*(RADIUS + 1),MARGIN_TOP,10,cxt);
    renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10),cxt);
    renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt);
    renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt);
    renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt);
    renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt);
    
    //绘制彩色小球
    for (var i = 0; i < balls.length ; i++) {
        cxt.fillStyle = balls[i].color;

        cxt.beginPath();
        cxt.arc( balls[i].x,balls[i].y, RADIUS, 0 , 2*Math.PI, true);
        cxt.closePath();
        cxt.fill();
    }
}
function renderDigit(x,y,num,cxt) {//定义一个函数绘制具体的数字(x轴坐标,y轴坐标,绘制的数字，上下文绘图环境)
    
    cxt.fillStyle = "rgb(0,102,153)";
    // digit[1][i]取到数字1第i行的7个小球，digit[1][i][j]取到数字1第i行第j个小球，
    for( var i = 0 ; i < digit[num].length ; i ++ )
        for(var j = 0 ; j < digit[num][i].length ; j ++ )
            if( digit[num][i][j] == 1 ){
                cxt.beginPath();
                //第（i,j）个圆的圆心位置 ;
                //CenterX:x+j*2(R+1)+(R+1)
                //CenterX:y+i*2*(R+1)+(R+1)
                cxt.arc( x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
               cxt.closePath()

                cxt.fill()
            }
}
    
    
     
